<style scoped lang='less'>

    .home-page {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        overflow: scroll;
        .row {
            color: white;
        }

        background-color: #001F48;

        .mynav {
            list-style-type: none;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }

        .mynav li {
            float: left;
        }

        .mynav li a {
            text-align: center;
            width: 120px;
            display: block;
            text-decoration: none;
            color: #cccccc;
        }

        .mynav li a img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mypanel-title {
            background: url('../../assets/image/title.png');
            background-repeat: round;
            background-size: cover;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            margin-top: 15px;
            color: black;
            .title-icon{
                width: 18px;
            }
        }

        .mypanel-content {
            background-color: #001F59;
            text-align: center;
            .work-state{
                margin-top: 10px;
            }
        }

        .mypanel-bottom {
            background: url('../../assets/image/panel_bottom.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
        }

        .zhiban-content {
            height: 170px;
            width: 100%;
            overflow: auto;
        }

        .zhiban-content::-webkit-scrollbar { /*滚动条整体样式*/
            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }

        .zhiban-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #00698C;
        }

        .zhiban-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .news-ul {
            margin-bottom: 0;
        }

        .news-ul li {
            list-style-image: url('../../assets/image/li_icon.png');
            color: #cccccc;
            height: 30px;
            line-height: 30px;
            display: flex;
        }
        .news-ul .news-title {
            color: #337ab7;
            margin-left: 10px;
        }

        .my-progress {
            width: 100%;
            background-color: aquamarine;
            height: 10px;
        }

        .my-progress div {
            height: 10px;
            background-color: chocolate;
        }
        .five-line {
            display: flex;
            margin-bottom: 5px;
            .name {
                color: floralwhite;
                width: 12%;
                font-size: 12px;
            }
            .linear-text {
                width: 100%;
                display: flex;
                .linear {
                    height: 20px;
                    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    width: 80%;
                    margin: 0 10px;
                }
            }
        }
        .six-liang {
            display: flex;
            border-bottom: 1px solid #f1f4f5;
            padding: 10px;
            .item {
                display: flex;
                .num{
                    color: #00a0e9;
                    font-weight: bolder;
                }
            }
            .right{
                margin-left: 10px;
            }
        }
        .video-item{
            border: 1px solid #4c648e;
            text-align: center;
            padding:5px 0;
            margin-top: 10px;
        }
        .video-html{
            display: flex;
            flex-wrap: wrap;
            .video-shi{
                width: 48%;
                margin-left: 10px;
                margin-top: 10px;
            }
        }
        .qiang{
            display: flex;
            padding:10px 0;
            .left-headimg{
                text-align: center;
                border-right: 1px solid #dfdfdf;
                margin-right: 10px;
                padding-right: 20px;
                .title{
                    color: #FF9800;
                    font-weight: bolder;
                    margin: 0;
                }
                .cover-head{
                    width: 100px;
                    margin: 10px 0;
                }
                .name{
                    color: #00BCD4;
                    font-weight: bolder;
                    margin: 0;
                }
            }
            .right-des{
                text-align: center;
                .title{
                    color: #FF9800;
                    font-weight: bolder;
                }
                .text1{
                    color: #00BCD4;
                    font-weight: bolder;
                }
                .text2{
                    color: white;
                }
            }
        }
    }
</style>
<template>
    <div class="home-page">
        <div class="container-fluid">
<!--            <homeNav></homeNav>-->
            <!--<div class="row" style="justify-content: center;">-->
                <!--<div style="height: 45px; line-height: 45px;color: floralwhite">XXXXXXX智慧管理平台</div>-->
            <!--</div>-->
            <!--<div class="row" style="background-color: #00698C; padding-top: 10px;justify-content: center;">-->
                <!--<div class="col-xs-12">-->
                    <!--&lt;!&ndash; 导航区域 &ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
            <div class="row">
                <div class="col-md-3">
                    <!-- 左侧内容区 -->
                    <!-- 通知公告 -->
                    <div id="divFastWay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_gongzuo.png" alt=""> 保障工作状态
                        </div>
                        <div class="mypanel-content">
                            <ul style="padding-left: 18px;list-style-type: none;">
<!--                                <template v-for="(item,index) in 5">-->
                                    <li>
                                        <div class="news-date work-state">人员待遇计算</div>
                                    </li>
                                    <li>
                                        <div class="news-date work-state">保险卡系统</div>
                                    </li>
                                    <li>
                                        <div class="news-date work-state">保险卡工作通报</div>
                                    </li>
                                    <li>
                                        <div class="news-date work-state">车炮场日计划</div>
                                    </li>
                                    <li>
                                        <div class="news-date work-state">战备主副食推行定量标准</div>
                                    </li>
<!--                                </template>-->
                            </ul>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_nanmen.png" alt="">南门携枪带弹哨位</div>
                        <div class="mypanel-content">
                            <div class="qiang" style="padding-left:30px;">
                               <div class="left-headimg">
                                   <p class="title">兵器室一日两查</p>
                                   <img src="../../assets/image/home-duty.jpeg" class="cover-head" alt="">
                                   <p class="name">王帆 助理员</p>
                               </div>
                                <div class="right-des">
                                    <p class="title">携枪带弹哨位</p>
                                    <div class="des">
                                        <p class="text1">武器名称: <span class="text2">95式步枪</span></p>
                                        <p class="text1">枪支编号: <span class="text2">0366655987</span></p>
                                        <p class="text1">弹药数量: <span class="text2">空包弹5发</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <div>
                        <div class="mypanel-title">就诊情况</div>
                        <div class="mypanel-content">
                           <div id="zhuangbei4" style="width: 300px;height: 200px;display: inline-block"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <div id="divFastWay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 快捷访问
                        </div>
                        <div class="mypanel-content">
                            <ul style="padding-left: 18px;list-style-type: none;">
                                <li style="clear: both; height: 1px;"></li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','politicalAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/zhengongguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            政工管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','AfterAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/houzhuangguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            后装管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','SafeAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/anquanguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            安全管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;">
                                    <a :href="oaUrl">
                                        <div class="text-center"><img src="../../assets/image/oahuiyiguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            办公OA
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','HolidayApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/qingjia.png"
                                                                      style="width: 35px; height: 35px;"></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            外出申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','DispatchCarApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/yongcheguanli01.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            车辆申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','home')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/guanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            进入管理后台
                                        </div>
                                    </a>

                                </li>
                            </ul>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <!-- 左侧内容区结束 -->
                </div>
                <div class="col-md-6">
                    <!-- 中间内容区 -->
                    <div id="renyuan" style="width: 900px;height:700px;"></div>
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_yingchan.png" alt=""> 营产营具情况
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                            <div id="ycyj" style="width: 550px;height: 200px;display: inline-block;"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!-- 右侧内容区 -->
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_caiwu.png" alt="">   装备维修统计
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                           <div id="weixiu" style="width: 300px;height: 200px;display: inline-block;"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_caiwu.png" alt="">   临时来对住房
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                           <div id="pingbi" style="width: 300px;height: 200px;display: inline-block;"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 右侧内容区结束 -->
                </div>
            </div>
        </div>

        <!-- 新闻浏览对话框 -->
        <div id="newsView" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="newsTitle">[News Title]</h4>
                    </div>
                    <div class="modal-body">
                        <p>发布时间：<span id="newsPubDate">[PubDate]</span></p>
                        <p id="newsContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻浏览对话框结束 -->
        <!-- 人员查看详情对话框 -->
        <div id="peopleDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">人员信息一览</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <img id="peopleHeadImg" src="" alt="人员头像" style="width: 120px; height: 160px;"/>
                        </p>
                        <p>
                            姓名：<span id="peopleName"></span>
                        </p>
                        <p>
                            性别：<span id="peopleSex"></span>
                        </p>
                        <p>
                            职务：<span id="peopleDuty"></span>
                        </p>
                        <p>
                            所在部门：<span id="peopleOrgName"></span>
                        </p>
                        <p>
                            联系方式：<span id="peopleContact"></span>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import homeNav from '../../components/homeNav'

    export default {
        data() {
            return {
                orgOptions: {},
                innerHeight: '',
                innerWidth: '',
            }
        },
        mounted: function () {
            this.drawChart();
            this.drawChart5();
            this.weixiuTu();
            this.pingbiChart();
            this.ycyjTu();
        },
        created: function () {
            console.log('create---')
        },
        components:{
            homeNav
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route='';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                this.$router.push(route);
            },
            //人员饼图统计
            drawChart(data) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("renyuan"));
                let that = this;

                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['军械装备','车辆装备','工化装备','后勤装备','防化装备','通信装备','轻武器类','主战装备','雷达类','电站类','光学武器类','小汽车'],
                        textStyle:{
                            color:'#fff',
                            fontSize:16
                        }
                    },
                    data:{
                      data1:  ['军械装备','车辆装备','工化装备','后勤装备','防化装备','通信装备','轻武器类','主战装备','雷达类','电站类','光学武器类','小汽车'],
                      data2:[
                          {value:135, name:'后勤装备'},
                          {value:1048, name:'防化装备'},
                          {value:251, name:'通信装备'},
                          {value:147, name:'轻武器类'},
                          {value:102, name:'主战装备'},
                          {value:102, name:'雷达类'},
                          {value:102, name:'电站类'},
                          {value:108, name:'光学武器类'},
                          {value:233, name:'小汽车'},
                      ]
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],

                            label: {
                                normal: {
                                    position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'车辆装备', selected:true},
                                {value:679, name:'军械装备'},
                                {value:1548, name:'工化装备'}
                            ]
                        },
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['40%', '55%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        // abg: {
                                        //     backgroundColor: '#333',
                                        //     width: '100%',
                                        //     align: 'right',
                                        //     height: 22,
                                        //     borderRadius: [4, 4, 0, 0]
                                        // },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data:[
                                {value:135, name:'后勤装备'},
                                {value:1048, name:'防化装备'},
                                {value:251, name:'通信装备'},
                                {value:147, name:'轻武器类'},
                                {value:102, name:'主战装备'},
                                {value:102, name:'雷达类'},
                                {value:102, name:'电站类'},
                                {value:108, name:'光学武器类'},
                                {value:233, name:'小汽车'},
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");

                // let data =this.genData();
                // 指定图表的配置项和数据

            },
            drawChart2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei1"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            drawChart3() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei2"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            drawChart4() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei3"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除y轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏y轴
                            axisLine: {show: false},
                            axisLabel: {
                                textStyle: {
                                    color: '#030a40',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            data: ['送修', '借出', '在位', '集训'],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除y轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏y轴
                            axisLine: {show: false},
                            //  改变y轴字体颜色和大小
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    series: [
                        {
                            name: '2011年',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //就诊图
            drawChart5() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei4"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['军务', '作训', '侦查', '宣传', '自动化站', '干部处', '三连','一连'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false//不显示坐标轴刻度线
                        },
                        "axisLine":{       //y轴
                            "show":false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false//不显示坐标轴刻度线
                        },
                        "axisLine":{       //y轴
                            "show":false,
                        },
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130, 115],
                        type: 'bar',
                        showBackground: false,
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function(params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: true, // 开启显示
                            rotate: 70, // 旋转70度
                            position: 'top', // 在上方显示
                            distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                            verticalAlign: 'middle',
                            textStyle: { // 数值样式
                                color: 'white',
                                fontSize: 12
                            }
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //营产营具情况
            ycyjTu() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("ycyj"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['双人床', '单人床', '干部衣帽柜', '搬用桌', '搬用柜', '搬用椅', '电脑桌','文件柜','搬用帐篷','餐厅帐篷'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false//不显示坐标轴刻度线
                        },
                        "axisLine":{       //y轴
                            "show":false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false//不显示坐标轴刻度线
                        },
                        "axisLine":{       //y轴
                            "show":false,
                        },
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130, 115,56],
                        type: 'bar',
                        showBackground: false,
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function(params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#0767a4','#0767a4','#0767a4','#0767a4','#0767a4','#0767a4','#0767a4','#0767a4','#0767a4'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: true, // 开启显示
                            rotate: 70, // 旋转70度
                            position: 'top', // 在上方显示
                            distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                            verticalAlign: 'middle',
                            textStyle: { // 数值样式
                                color: 'white',
                                fontSize: 12
                            }
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //装备维修统计
            weixiuTu() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("weixiu"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    color: ['#3398DB','#ca8622'],

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['申请', '修改',],
                        textStyle:{
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['车辆装备', '轻武器类', '主站装备', '雷达类'],
                            "axisLine":{       //y轴
                                "show":false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        },

                    ],
                    yAxis: [
                        {
                            type: 'value',
                            "axisLine":{       //y轴
                                "show":false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLabel: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            }
                        },
                    ],
                    series: [
                        {
                            name: '申请',
                            type: 'bar',
                            data: [320, 332, 301, 334, 390, 330, 320]

                        },
                        {
                            name: '修改',
                            type: 'bar',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            zhanbeiChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhanbei"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '战备值',
                        x: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 25,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            pingbiChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("pingbi"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    color: ['#3398DB','#ca8622'],

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['已住', '空置'],
                        textStyle:{
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['司令部', '政治处', '保障处', '一营','二营'],
                            "axisLine":{       //y轴
                                "show":false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        },

                    ],
                    yAxis: [
                        {
                            type: 'value',
                            "axisLine":{       //y轴
                                "show":false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLabel: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            }
                        },
                    ],
                    series: [
                        {
                            name: '已住',
                            type: 'bar',
                            data: [320, 332, 301, 334, 390, 330, 320]

                        },
                        {
                            name: '空置',
                            type: 'bar',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    }
</script>
